<template>
  <el-dialog draggable title="科室员工" :close-on-click-modal="false" class="yy-modal--custom" width="60%" v-model="isVisible" @close="onCancelModel" :show-close="true">
    <div class="yy-page yy-system-depart">
      <div class="yy-page-data">
        <WidgetTable  :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging">
          <template v-slot:orderNum="{row, column}">
            <el-input-number v-model="row.orderNum" :min="0" style="width: 100px;" controls-position="right" @change="onSaveOrderNum(row)"/>
          </template>
        </WidgetTable>
      </div>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: space-between;">
        <el-button type="primary" @click.stop="onOpenManageDialog">新增员工</el-button>
        <el-button  @click.stop="onCancelModel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <DepartMemberManageDialog ref="departMemberManageDialogRef" @saveSuccess="onAddEmployeeSuccess"/>
</template>

<script setup lang="ts">

import {defineExpose, reactive, ref} from "vue";
import {TableColumn} from "@/model/Definition";
import {EmployeeModel} from "@/model/EmployeeModel";
import {formatDate} from "@/utils/yayi";
import {ElMessage} from "element-plus";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import DepartMemberManageDialog from "@/views/system/dept/DepartMemberManageDialog.vue";
import {getDeptMember, removeDeptMember, saveOrderNumber} from "@/api/system/dept";

const isVisible = ref(false)
const depart = ref()
const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: EmployeeModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"code",
      "label":"编码",
      "showable":true
    },
    {
      "field":"sex",
      "label":"性别",
      "showable":true
    },
    {
      "field":"birthday",
      "label":"出生日期",
      "showable":true
    },
    {
      "field":"phone",
      "label":"联系电话",
      "showable":true
    },
    {
      "field":"dutyName",
      "label":"职称",
      "showable":true
    },
    {
      "field": "orderNum",
      "label": "显示排序",
      "width": 120,
      "showable": true
    },
    {
      "field":"state",
      "label":"状态",
      "showable":true,
      "sortable":false,
      "fixed": 'right',
      "align": 'center',
      "width": 60,
    },
    {
      "field":"action",
      "label":"操作",
      "width": 80,
      "showable":true,
      "sortable":false,
      "align": 'center',
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false
  },
  data: [],
  formats: {
    'orderNum': {
      slot: 'orderNum'
    },
    'state': {
      textType:'text',
      typeFormat: EmployeeModel.getStateType,
      labelFormat: EmployeeModel.getStateLabel
    },
    'sex': {
      labelFormat: (sex, row) => EmployeeModel.getSex(sex)?.label
    },
    'birthday': {
      labelFormat: (val, row) => formatDate(val, 'YYYY-MM-DD')
    },
    'updateTime': {
      labelFormat:  (val) =>formatDate(val)
    },
    'action': {
      items: [
        {
          label: '移除',
          value: 'delete',
          confirm: {
            title: '您确定要移除该员工吗？',
            atConfirm: (data: EmployeeModel) => {
              removeDeptMember(depart.value.deptId, data.id).then(() => {
                ElMessage.success({
                  message: '移除成员成功',
                  showClose: true,
                })
                const index = table.data.findIndex(item => item.id == data.id)
                table.data.splice(index, 1)
              })
            }
          }
        }
      ]
    }
  }
})

const departMemberManageDialogRef = ref()

const onOpenManageDialog = () => {
  departMemberManageDialogRef.value.onShowDialog(depart.value)
}

const onShowDialog = (data) => {
  depart.value = data
  isVisible.value = true
  getEmployeeList()
}

const getEmployeeList = () => {
  table.isLoading = true
  getDeptMember(depart.value.deptId).then((res) => {
    if (res.code === 200) {
      table.data = res.data
    }
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onAddEmployeeSuccess = () => {
  getEmployeeList()
}


const onCancelModel = () => {
  isVisible.value = false
}

const onSaveOrderNum = (row) => {
  saveOrderNumber(depart.value.deptId, row).then((res) => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
    }
  })
}

defineExpose({
  onShowDialog
})
</script>
<style scoped lang="scss">

</style>
